<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">
            <div id="wrapper">
                <input id="slider" class="balSlider" />
                <div id="equalizer">
                    <input class="eqSlider" value="10" />
                    <input class="eqSlider" value="5" />
                    <input class="eqSlider" value="0" />
                    <input class="eqSlider" value="10" />
                    <input class="eqSlider" value="15" />
                </div>
            </div>

            <script>
                $(document).ready(function() {
                    var slider = $("#slider").kendoSlider({
                        increaseButtonTitle: "Right",
                        decreaseButtonTitle: "Left",
                        min: -10,
                        max: 10,
                        smallStep: 2,
                        largeStep: 1
                    }).data("kendoSlider");

                    slider.wrapper.find(".k-slider-selection").hide();
                    $(".eqSlider").kendoSlider({
                        orientation: "vertical",
                        min: -20,
                        max: 20,
                        smallStep: 1,
                        largeStep: 20,
                        showButtons: false
                    });
                });
            </script>

            <style>
                #wrapper {
                    width: 300px;
                    height: 255px;
                    padding: 45px 0 0 0;
                    margin: 0 auto;
                    background: url('../../content/web/slider/eqBack.png') no-repeat 0 0;
                    text-align: center;
                }
                #equalizer {
                    margin-top: 75px;
                    padding-right: 15px;
                }
                .balSlider {
                    width: 240px;
                }
                #slider .k-slider-selection {
                    display: none;
                }
                .eqSlider {
                    display: inline-block;
                    zoom: 1;
                    margin: 0 12px;
                    height: 122px;
                }
                
                *+html .eqSlider {display:inline;}
                
            </style>
        </div>
</body>
</html>
